<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <!-- 工具栏 -->
      <PageTool>
        <template v-slot:after>
          <el-button type="primary" size="small" @click="addRole">添加角色</el-button>
        </template>
      </PageTool>
      <!-- 表格 -->
      <template>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
        >
          <el-table-column
            prop="title"
            label="角色名称"
          />
          <el-table-column
            prop="description"
            label="角色描述"
          />
          <el-table-column
            label="操作"
          >
            <template v-slot="{row}">
              <el-button type="primary" size="small" @click="assignPerm(row.id)">分配权限</el-button>
              <el-button size="small" @click="editRole(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delRole(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <!--
                prev: 左箭头
                pager：页码
                next：右箭头
                total：总数量
                page-size: 设置每页展示的数据数量
               -->
          <div class="block">
            <span class="demonstration" />
            <el-pagination
              :current-page="currentPage4"
              :page-sizes="[pageSize]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="pageChange"
            />
          </div>
        </el-row>
      </template>
      <AddRole
        ref="addRole"
        :show-dialog.sync="showDialog"
        @updateEvent="getRole"
      />
      <AssignPermission
        :show-dialog.sync="visibleDialog"
      />
    </div>
  </div>
</template>
<script>
import AddRole from './components/addRole.vue'
import AssignPermission from './components/assignPermission.vue'
import { getRole, delRole, getRoleList } from '@/api/role'
export default {
  components: { AddRole, AssignPermission },
  data() {
    return {
      tableData: [],
      showDialog: false,
      visibleDialog: false,
      currentPage4: 0,
      page: 0, // 第几个开始请求数据数量
      pageSize: 2, // 每个分页多少条数据
      total: 0 // 数据总数量
    }
  },
  async created() {
    this.getRole()
    // 获取角色数量
    this.getRoleListNum()
  },
  methods: {
    // 获取用户总数量
    async getRoleListNum() { // 获取客户总数量
      const res = await getRoleList()
      this.total = res.data
    },
    // 添加角色
    addRole() {
      this.showDialog = true
    },
    // 删除角色
    delRole(id) {
      // 询问框
      this.$confirm('是否确定删除？', '提示', {
        type: 'warning'
      }).then(async() => {
        if (this.tableData.length === 1 && this.page !== 0) {
          this.page = this.page - this.pageSize
        }
        // 调用接口 实现删除
        await delRole(id)
        // 更新列表
        this.getRole()
        // 更新数量
        this.getRoleListNum()
      }).catch(err => {
        console.log('点击了取消按钮：', err)
      })
    },
    pageChange(page) { // 分页切换发送请求
      this.page = (page - 1) * this.pageSize
      this.getRole()
      this.getRoleListNum()
    },
    // 编辑角色
    editRole(id) {
      this.showDialog = true
      this.$refs.addRole.getRoles(id)
    },
    // 获取角色列表
    async getRole() {
      const res = await getRole({
        _limit: this.pageSize,
        _start: this.page
      })
      this.tableData = res.data
    },
    // 分配权限
    assignPerm() {
      this.visibleDialog = true
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 25px;
  }
  &-text {
    font-size: 30px;
    line-height: 20px;
  }
}
</style>
